<template>
	<view class="content">
		<!-- <movable-area :style="[getAreaStyle]"> -->
			<movable-view v-for="(item, index) in list" :animation="animation" :direction="direction" :key="item.key"
				:damping="damping" :x="item.x" :y="item.y" :disabled="longpress ? disabled : false"
				@longpress="handleLongpress" @touchstart="handleDragStart(index)" @change="handleMoving"
				@touchend="handleDragEnd" :style="[getViewStyle]" class="base-drag-wrapper">
				<view :class="{ 'base-drag-wrapper-active': activeIndex === index }"
					class="drag-item itemCells whiteColor "
					style="width: calc(100% - 136rpx) ;padding: 16px 16px 16px 20px;height: 18px;">
					
					<view class="sort-num ccc fontbebas" style="font-size: 16px;">第{{index+1}}</view>

				</view>

			</movable-view>
		<!-- </movable-area> -->
	</view>
</template>

<script>
	export default {
		props: {
			column: {
				type: Number,
				default: 1
			},
			value: {
				type: Array,
				default: () => []
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: 'auto'
			},
			itemKey: {
				type: String,
				required: true
			},
			itemHeight: {
				type: String,
				default: '60px'
			},
			direction: {
				type: String,
				default: 'all',
				validator: value => {
					return ['all', 'vertical', 'horizontal', 'none'].includes(value);
				}
			},
			animation: {
				type: Boolean,
				default: true
			},
			damping: {
				type: Number,
				default: 20
			},
			longpress: {
				type: Boolean,
				default: true
			},

		},
		data() {
			return {
				list: [{
					text: '变化1'
				}],
				disabled: true,
				activeIndex: -1,
				moveToIndex: -1,
				oldIndex: -1,
				tempDragInfo: {
					x: '',
					y: ''
				},
				cloneList: [],
			}
		},
		onLoad() {
			this.initList(this.list)
		},
		computed: {
			getAreaStyle() {
				const width = this.getRealWidth(this.width);
				return {
					width: width + 'px',
					height: this.height !== 'auto' ? this.height : Math.round(this.list.length / this.column) * this
						.getItemHeight + 'px'
				};
			},
			getViewStyle() {
				const {
					itemHeight,
					getItemWidth
				} = this;
				return {
					width: getItemWidth + 'px',
					height: itemHeight
				};
			},
			getItemHeight() {
				return parseFloat(this.itemHeight);
			},
			getItemWidth() {
				if (this.column === 0) return;
				const width = this.getRealWidth(this.width);
				return (parseFloat(width) / this.column).toFixed(2);
			},
		},
		methods: {
			//拖拽中
			handleMoving(e) {
				if (e.detail.source !== 'touch') return;
				const {
					x,
					y
				} = e.detail;
				Object.assign(this.tempDragInfo, {
					x,
					y
				});

				const currentX = Math.floor((x + this.getItemWidth / 2) / this.getItemWidth);
				const currentY = Math.floor((y + this.getItemHeight / 2) / this.getItemHeight);

				this.moveToIndex = Math.min(currentY * this.column + currentX, this.list.length - 1);
				if (this.oldIndex !== this.moveToIndex && this.oldIndex !== -1 && this.moveToIndex !== -1) {
					const newList = this.deepCopy(this.cloneList);
					let splicItem = newList.splice(this.activeIndex, 1)[0]
					newList.splice(this.moveToIndex, 0, splicItem);

					this.list.forEach((item, index) => {
						if (index !== this.activeIndex) {
							const itemIndex = newList.findIndex(val => val.id === item.id);
							console.log(itemIndex);

							[item.x, item.y] = this.getPosition(itemIndex);
						}
					});
					this.oldIndex = this.moveToIndex;
				}
			},
			//拖拽结束
			handleDragEnd(e) {
				if (this.disabled) return;
				if (this.moveToIndex !== -1 && this.activeIndex !== -1 && this.moveToIndex !== this.activeIndex) {
					console.log(this.cloneList);
					this.cloneList.splice(this.moveToIndex, 0, ...this.cloneList.splice(this.activeIndex, 1));
					console.log(this.cloneList, '>>');
				} else {
					this.$set(this.list[this.activeIndex], 'x', this.tempDragInfo.x);
					this.$set(this.list[this.activeIndex], 'y', this.tempDragInfo.y);
				}
				this.initList(this.cloneList);
				const endList = this.list.map(item => this.omit(item, ['x', 'y', 'key']));
				this.$emit('input', endList);
				this.$emit('end', endList);

				this.activeIndex = -1;
				this.oldIndex = -1;
				this.moveToIndex = -1;
				this.disabled = true;
				this.$emit('handleDragEnd')
			},

			//获取当前的位置
			getPosition(index) {
				const x = (index % this.column) * this.getItemWidth;
				const y = Math.floor(index / this.column) * this.getItemHeight;
				return [x, y];
			},
			omit(obj, args) {
				if (!args) return obj;
				const newObj = {};
				const isString = typeof args === 'string';
				const keys = Object.keys(obj).filter(item => {
					if (isString) {
						return item !== args;
					}
					return !args.includes(item);
				});

				keys.forEach(key => {
					if (obj[key] !== undefined) newObj[key] = obj[key];
				});
				return newObj;

			},
			initList(list = []) {
				const newList = this.deepCopy(list);
				this.list = newList.map((item, index) => {
					const [x, y] = this.getPosition(index);
					return {
						...item,
						x,
						y,
						id: index + 1,
						key: Math.random() + index
					};
				});
				this.cloneList = this.deepCopy(this.list);
			},
			deepCopy(source) {
				return JSON.parse(JSON.stringify(source));
			},
			//获取实际的宽度
			getRealWidth(width) {
				if (width.includes('%')) {
					const windowWidth = uni.getSystemInfoSync().windowWidth;
					width = windowWidth * (parseFloat(width) / 100);
				}
				return width;
			},
			//长按
			handleLongpress() {
				this.disabled = false;
			},

			//拖拽开始	
			handleDragStart(index) {
				this.activeIndex = index;
				this.oldIndex = index;
			},

			onChange(e) {

			}

		}
	}
</script>

<style lang="scss">
	.base-drag-wrapper {
		opacity: 1;
		z-index: 1;
		color: #212121;
		margin-bottom: 15px;

		&.active {
			transform: scale(1.3);
			z-index: 99;
		}
	}

	.base-drag-wrapper-active {
		transform: scale(1.01);
		z-index: 99;
	}

	.item-wrap {
		position: relative;
	}

	.item-wrap .item {
		position: absolute;
		width: 100%;
		z-index: 1;
	}

	.item-wrap .item.itemTransition {
		transition: transform 0.3s;
	}

	.item-wrap .item.zIndex {
		z-index: 2;
	}

	.item-wrap .item.cur {
		transition: initial;
	}

	.item-wrap .item.fixed {
		z-index: 0 !important;
	}

	.info {
		position: relative;
		padding-top: 100%;
		background: #ffffff;
	}

	.info__item {
		position: absolute;
		border: 1rpx solid #ebedf0;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.info__item .image {
		width: 100%;
		height: 100%;
	}

	.cell {
		display: flex;
		padding: 20rpx;
		border-bottom: 1rpx solid #ebedf0;
		background: #FFFFFF;
	}

	.cell__hd {
		font-size: 0;
	}

	.cell__hd .image {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}

	.cell__bd {
		flex: 1;
	}

	.cell__bd .name {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		word-break: break-all;
		font-size: 28rpx;
		margin-bottom: 12rpx;
	}

	.cell__bd .des {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		word-break: break-all;
		color: #666666;
		font-size: 24rpx;
	}

	.itemCells {
		background-color: #96570054;
		border-radius: 8rpx;
		padding: 20px;
		width: calc(100% - 144rpx);
		margin: 0 auto;
		// margin-top: 24rpx;
		// border-radius: 8px;
		// padding: 34rpx 24rpx;
	}

	.sort-num {
		margin-right: 16rpx;
	}

	.radio {
		width: 10px;
		height: 10px;
		border-radius: 20px;
		border: 1px solid #CCCCCC;
		margin-right: 10rpx;

		&.active-radio {
			position: relative;
			border-color: #447DFF;
			border: 1px solid #447DFF;

			&::after {
				content: '';
				width: 6px;
				height: 6px;
				position: absolute;
				right: 2px;
				top: 2px;
				background-color: #447DFF;
				border-radius: 20px;
			}
		}

	}

	.icon-a-menu1 {
		color: #D9D9D9;
		font-size: 12px;
	}
</style>